<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>体验Vue.js 3.x</title>
    </head>
    <body>

        <h3>体验Vue.js 3.x</h3>

        <!-- 根组件的挂载点 -->
        <div id="root">
            <div>
                <!-- 使用 v-on 绑定 click 事件处理器 -->
                <button v-on:click="decrease">变小</button>
                <!-- 使用 v-model 指令为 input 绑定属性 -->
                <input type="text" v-model="counter">
                <button v-on:click="increase">变大</button>
            </div>
            <!-- 使用 `插值表达式` 将数据显示到页面上 -->
            <div>{{ counter }}</div>
        </div>

        <!-- 导入 Vue 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <!-- 编写自己的JavaScript代码 -->
        <script>

            const options = {
                // 数据域
                data(){
                    return {
                        counter: 1000
                    }
                },
                // 方法
                methods: {
                    decrease(evt){
                        console.log( evt.target );
                        this.counter-- ; // 让 counter 减少
                    },
                    increase(evt){
                        console.log( evt.target );
                        this.counter++ ; // 让 counter 增加
                    }
                }
            }

            // 创建 Vue 应用
            const application = Vue.createApp( options );
            console.log( application );

            // 将 根组件挂载 到 DOM节点
            const root = application.mount( '#root' );
            console.log( root );

        </script>
        
    </body>
</html>